<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Classes.Timeline - JSFromHell.com: JavaScript Repository</title>
	<link rel="shortcut icon" href="http://jsfromhell.com/favicon.ico" type="image/x-icon"/>
	<link rel="add icon" href="http://jsfromhell.com/addicon.ico" type="image/x-icon"/>
	<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8"/>
	<meta http-equiv="content-language" content="en-us"/>
	<meta http-equiv="content-style-type" content="text/css"/>
	<meta http-equiv="content-script-type" content="text/javascript"/>
	<meta name="resource-type" content="document"/>
	<meta name="revisit-after" content="5"/>
	<meta name="robots" content="all"/>
	<meta name="author" content="Carlos R. L. Rodrigues, Jonas Raoni Soares Silva"/>
	<meta name="description" content="JavaScript source code repository"/>
	<meta name="classification" content="development"/>
	<meta name="robots" content="all"/>
	<meta name="keywords" content="javascript, jscript, repository, codes"/>
	<link rel="alternate" href="http://jsfromhell.com/en/feed/atom.xml" type="application/atom+xml" title="Atom"/>
	<link rel="stylesheet" href="timeline_files/main.css" media="all" type="text/css"/>
	<!--[if lte IE 7]>
	<style type="text/css">
	legend{margin-top: -10px;}
	</style>
	<![endif]-->
	<script src="timeline_files/event.js" type="text/javascript"/>
	
</head>
<body>
		<div id="header">
		<div id="title">
			<h2><a href="http://jsfromhell.com/">JSFromHell.com</a></h2>
			<div id="languages">
				<a href="http://jsfromhell.com/en/classes/timeline" title="English version">English</a>
				: <a href="http://jsfromhell.com/pt/classes/timeline" title="Versão em português">Português</a>
			</div>
		</div>
		<div class="clear"/>
		<div id="menu" class="clear">
			<ul>
				<li><a href="http://jsfromhell.com/array" title="Array">Array</a></li>
				<li><a href="http://jsfromhell.com/classes" title="Classes">Classes</a></li>
				<li><a href="http://jsfromhell.com/dhtml" title="DHTML">DHTML</a></li>
				<li><a href="http://jsfromhell.com/forms" title="Forms">Forms</a></li>
				<li><a href="http://jsfromhell.com/geral" title="Geral">Geral</a></li>
				<li><a href="http://jsfromhell.com/math" title="Math">Math</a></li>
				<li><a href="http://jsfromhell.com/number" title="Number">Number</a></li>
				<li><a href="http://jsfromhell.com/string" title="String">String</a></li>
				<li><a href="http://jsfromhell.com/samples" title="Samples">Samples</a></li>
			</ul>
			<div class="clear"/>
		</div>
	</div>
	<div id="all">
		<div id="content">
		 	<div id="navigation">
				<a href="#description-header">Description</a>
				: <a href="#code-header">Code</a>
				: <a href="#example-header">Example</a>
				: <a href="#help-header">Help</a>
				: <a href="#rank-header">Rank</a>
			</div>
			<h1>
				Timeline
				<span>//JavaScript Repository</span>
			</h1>

			<h2 id="description-header" class="clear">Description</h2>
			<div id="description">
				Simulates the Adobe Flash timeline. You define the amount of frames, the speed in fps (frames per second) and, at each frame passage an event is called, useful for animations.
				<br/>Created: 2008.03.14 
			</div>
			

			<h2 id="code-header">Code (<a href="http://jsfromhell.com/classes/timeline/download" rel="nofollow" title="Download the code">Download</a>)</h2>
			<div id="code">
				<pre><code>//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/classes/timeline [rev. #0]

TimeLine = function(fps, f){
    this.fps = fps, this.frames = f;
};
with({o: TimeLine, $: TimeLine.prototype}){
    o.timers = [];
    $.running = !!($.current = +(o.timer = $.time = null));
    o.run = function(){
        var o = this;
        o.timer || (o.timer = setInterval(function(){
            for(var h, d = +(new Date), t = o.timers, i = t.length; i--;){
                (!t[i].running || ((d - t[i].time) / (1e3 / t[i].fps) &gt; t[i].current + 1 &amp;&amp;
                t[i].onframe(++t[i].current), t[i].current &gt;= t[i].frames)) &amp;&amp;
                (h = t.splice(i, 1)[0], h.stop(1));
            }
        }, 1));
    };
    $.start = function(c){
        var o = this, t = TimeLine;
        if(o.running) return;
        o.running = true, o.current = c || 0;
        o.time = new Date, o.onstart &amp;&amp; o.onstart();
        if(!o.onframe || o.frames &lt;= 0 || o.fps &lt;= 0)
            return o.stop(1);
        t.timers.push(this), t.run();
    };
    $.stop = function(){
        var o = this;
        o.running = false;
        if(!TimeLine.timers.length)
            TimeLine.timer = clearInterval(TimeLine.timer), null;
        arguments.length &amp;&amp; o.onstop &amp;&amp; o.onstop();
    };
}</code></pre>
			</div>


			<h2 id="example-header">Example (<a href="http://jsfromhell.com/classes/timeline/example" title="Functional example">Example</a>)</h2>
			<div id="example">
				<pre><code>&lt;div id="box" style="position: absolute; top: 100px; background: #efe; width: 100px; height: 100px"&gt;25 fps&lt;/div&gt;
&lt;div id="box2" style="position: absolute; top: 300px; background: #ff9; width: 100px; height: 100px"&gt;12 fps&lt;/div&gt;

&lt;strong&gt;TimeLine working together with the ease in quad function.&lt;/strong&gt;&lt;br /&gt;

&lt;script type="text/javascript"&gt;
//&lt;![CDATA[

Math.ease = function (t, b, c, d) {
    if ((t /= d / 2) &lt; 1)
        return c / 2 * t * t + b;
    return -c / 2 * (--t * (t - 2) - 1) + b;
};

var o = new TimeLine(25, 50), d = document, b = d.getElementById("box");
o.onframe = function(){
    b.style.left = Math.ease(this.current, 0, 400, 30) + "px";
};
o.onstart = function(){
    d.body.appendChild(d.createTextNode("Started"));
};
o.onstop = function(){
    d.body.appendChild(d.createTextNode(" - Finished (" + (((new Date) - this.time)) + " msec)"))
    d.body.appendChild(d.createElement("br"));
    this.start();
};
o.start();


var o2 = new TimeLine(12, 50), b2 = d.getElementById("box2");
o2.onframe = function(){
    b2.style.left = Math.ease(this.current, 0, 400, 30) + "px";
};
o2.onstop = function(){
    this.start();
};
o2.start();

//]]&gt;
&lt;/script&gt;</code></pre>
			</div>


			<h2 id="help-header">Help</h2>
			<div id="help">
				<h4>Constructor</h4>
<dl>
	<dt><strong>TimeLine(fps: Number, frames: Number)</strong></dt>
	<dd>
		Generates an instance of TimeLine.
		<dl>
			<dt>fps</dt> <dd>animation velocity in fps</dd>
			<dt>frames</dt> <dd>amount of frames</dd>
		</dl>		
	</dd>
</dl>

<h4>Properties</h4>
<dl>
	<dt>TimeLine<strong>.current: Integer</strong></dt> <dd>Keep the current frame.</dd>
	<dt>TimeLine<strong>.frames: Integer</strong></dt> <dd>Amount of frames.</dd>			
	<dt>TimeLine<strong>.fps: Integer</strong></dt> <dd>Velocity in frames per second.</dd>
	<dt>TimeLine<strong>.running: Boolean</strong></dt> <dd>Indicates if the animation is running.</dd>
	<dt>TimeLine<strong>.time: Date</strong></dt> <dd>Keeps the date of when the animation started.</dd>	
</dl>

<h4>Methods</h4>
<dl>
	<dt>TimeLine<strong>.start([current: Number = 0]): void</strong></dt>
	<dd>
		Starts the animation.
		<dl>
			<dt>current</dt> <dd>defines the initial frame, the default is 0</dd>
		</dl>
	</dd>	

	<dt>TimeLine<strong>.stop(void): void</strong></dt>
	<dd>Stops the animation.</dd>
</dl>

<h4>Events</h4>
<dl>
	<dt>TimeLine<strong>.onstart: function(): void</strong></dt>
	<dd>Called when starting the animation.</dd>
			
	<dt>TimeLine<strong>.onframe: function(): void</strong></dt>
	<dd>Called for each animation frame.</dd>
			
	<dt>TimeLine<strong>.onstop: function(): void</strong></dt>
	<dd>Called when stopping the animation.</dd>
</dl>
			</div>


			<h2 id="rank-header">Rank (Votes: 12)</h2>
			<div id="rank">
				<div id="progress">
					<div class="bar excelent" style="width: 85%;"/>
					<div class="text">4.25</div>
				</div>
				<form method="post" action="" id="formVote">
					<div>
						<input type="radio" name="rate" value="0" id="vote-0"/> <label class="inline" for="vote-0">0</label>
						<input type="radio" name="rate" value="1" id="vote-1"/> <label class="inline" for="vote-1">1</label>
						<input type="radio" name="rate" value="2" id="vote-2"/> <label class="inline" for="vote-2">2</label>
						<input type="radio" name="rate" value="3" id="vote-3"/> <label class="inline" for="vote-3">3</label>
						<input type="radio" name="rate" value="4" id="vote-4"/> <label class="inline" for="vote-4">4</label>
						<input type="radio" name="rate" value="5" id="vote-5"/> <label class="inline" for="vote-5">5</label>
						<input type="submit" name="submit" value="Vote"/>
					</div>
				</form>

				<script type="text/javascript" src="timeline_files/code.js"/>
				<script type="text/javascript">
				//<![CDATA[
				code("Select a grade.");
				//]]>
				</script>
				<div class="clear"/>
			</div>
		</div>
				<div class="clear"/>
		<div id="footer">
			<a href="http://jsfromhell.com/en/feed/atom.xml" title="Feed ATOM."><img src="timeline_files/feed.gif" alt="feed icon"/> Sign up the ATOM feed</a>
			| <a href="http://jsfromhell.com/contact" title="If you have a non-trivial code or a good idea, send us">Send your code</a>
			| <a href="http://jsfromhell.com/contact" title="If you've found an error on the site, contact us">Problems on the site</a>
			| <strong>Support us:</strong>
			<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="display: inline;">
				<p class="inline">
				<input type="image" style="border: medium none ; vertical-align: middle;" src="timeline_files/paypal.gif" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
				<img height="1" width="1" alt="" src="timeline_files/pixel.gif"/>
				<input type="hidden" name="cmd" value="_donations"/>
				<input type="hidden" name="business" value="jonas@jonasraoni.org"/>
				<input type="hidden" name="item_name" value="JSFromHell Donation"/>
				<input type="hidden" name="item_number" value="JSFromHell"/>
				<input type="hidden" name="no_shipping" value="1"/>
				<input type="hidden" name="cn" value="Se quiser, deixe sua mensagem"/>
				<input type="hidden" name="currency_code" value="USD"/>
				<input type="hidden" name="tax" value="0"/>
				<input type="hidden" name="lc" value="BR"/>
				<input type="hidden" name="bn" value="PP-DonationsBF"/>
				</p>
			</form>
		</div>
		<script src="timeline_files/urchin.js" type="text/javascript"/>
		<script type="text/javascript">
		//<![CDATA[
		_uacct = "UA-163788-1";
		urchinTracker();
		//]]>
		</script>
	</div>
</body>
</html>